<template>
  <div id="app">
    <!-- <el-row :gutter="100">
      <el-col v-for="index in 30"
      :key="index"
      :md="6"
      :sm="8"
      :xs="24">
        <div class="grid-content"></div>
      </el-col>
    </el-row> -->
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>
          <el-table
          :border="true"
          stripe
          :data="showData">
              <el-table-column
              prop="date"
              type="selection">
              </el-table-column>
               <el-table-column
              prop="name"
              label="姓名">
              </el-table-column>
               <el-table-column
              prop="cellphone"
              label="手机号">
              </el-table-column>
               <el-table-column
              prop="date"
              label="日期">
              </el-table-column>
               <el-table-column
              prop="info"
              label="信息">
              </el-table-column>
               <el-table-column
              label="操作">
              </el-table-column>
          </el-table>
           <el-pagination
           layout="prev, pager, next"
           :page-size="5"
           :total="tableData.length"
           @current-change="currentChange">
           </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
    
  },
  methods:{
    currentChange(page){
      console.log(page)
      this.showData  = [];
      this.currentPage = page;
      var end = this.currentFlag*page;
      if(end>this.tableData.length){
        end=this.tableData.length
      }
      var start = this.currentFlag*(page-1);

      for(let index=start;index<end;index++){
      this.showData.push(this.tableData[index])
    }
    }
  },
  mounted(){
    for(let index=0;index<this.currentFlag;index++){
      this.showData.push(this.tableData[index])
    }
  },
  data(){
    return{
      currentPage:1,
      currentFlag:5,
      showData:[],
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          cellphone:"11124124125",
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          info:"jkdhsabghjksbdajsbgk",
          cellphone:"11124124125",
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  }
}
</script>

<style>
.grid-content
{
  height: 200px;
  background-color: red;
  margin-bottom: 10px;
}

@media screen and (max-width: 768px){
  .grid-content
  {
    height: 80px;
  }
}

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    /* line-height: 200px; */
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }
</style>
